<template>
  <div></div>
</template>

<script setup>
import { inject, onBeforeUnmount, onMounted } from 'vue'
import { CityBuildingLayer, LineLayer, LayerSwitch } from '@antv/l7'
import { getBudingData, getRoadData } from '@/api'
import { Loading } from 'element-plus/es/components/loading/src/service'
const { map, scene } = inject('mapscene')
let center = [114.264247, 30.59431]
let buildingLayer = null
let roadLayer = null
let layerSwitch = null
onMounted(async () => {
  // 飞到指定位置
  map.flyTo({
    center,
    zoom: 14,
    speed: 1,
    pitch: 45,
  })
  // 获取数据
  const budingData = await getBudingData()
  const roadData = await getRoadData()
  // 加载建筑图层
  buildingLayer = new CityBuildingLayer({
    name: '建筑图层',
  })
  buildingLayer
    .source(budingData.data)
    .size('Elevation', height => height) //设置建筑高度
    .filter('Elevation', h => h > 30) //过滤显示高度大于30的建筑
    .color('rgba(242,246,250,1.0)')
    .animate({
      enable: true,
    })
    .active({
      color: '#0ff',
      mix: 0.5,
    })
    .style({
      opacity: 0.7,
      baseColor: 'rgb(16, 16, 16)',
      windowColor: 'rgb(30, 60, 89)',
      brightColor: 'rgb(255, 176, 38)',
      //扫光效果
      sweep: {
        enable: true,
        sweepRadius: 2,
        sweepColor: '#1990FF',
        sweepSpeed: 0.3,
        sweepCenter: center,
      },
    })
  scene.addLayer(buildingLayer)

  // 加载道路图层
  roadLayer = new LineLayer({
    name: '道路图层',
  })
  roadLayer
    .source(roadData.data)
    .shape('line')
    .color('type', type => {
      switch (type) {
        case 'motorway':
          return '#F9D371'
        case 'motorway_link':
          return '#3DB2FF'
        case 'trunk':
          return 'green'
        case 'trunk_link':
          return '#6E85B2'
        case 'primary':
          return '#F47340'
        case 'primary_link':
          return '#F6A9A9'
        case 'secondary':
          return '#EF2F88'
        case 'secondary_link':
          return '#5F7A61'
        case 'tertiary':
          return '#1ee3cf'
        case 'tertiary_link':
          return '#C2F784'
        case 'pedestrian':
          return '#FFF89A'
        case 'residential':
          return 'rgba(22, 119, 255, .5)'
        case 'road':
          return '#93FFD8'
        case 'path':
          return '#BAFFB4'
        case 'unclassified':
          return '#D3DEDC'
        case 'service':
          return '#AEFEFF'
        case 'living_street':
          return '#9B0000'
        case 'track':
          return '#F5F5F5'
        case 'highway':
          return 'red'
        case 'rail':
          return '#08ffc8'
        default:
          return '#FFE3E3'
      }
    })
    .size(1)
    .active(true)
    .animate({
      interval: 1, //间隔
      duration: 2, //持续时间
      trailLength: 2, //流线长度
    })

  scene.addLayer(roadLayer)

  // 图层切换控件
  layerSwitch = new LayerSwitch({
    layers: [buildingLayer, roadLayer],
    position: 'rightcenter',
  })
  scene.addControl(layerSwitch)
})
// 在组件卸载前移除图层和图层切换组件
onBeforeUnmount(() => {
  if (buildingLayer) {
    scene.removeLayer(buildingLayer)
  }
  if (roadLayer) {
    scene.removeLayer(roadLayer)
  }
  if (layerSwitch) {
    scene.removeControl(layerSwitch)
  }
})
</script>
<style lang="scss" scoped></style>
